<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>clear 清除前面兄弟元素浮动</title>
	<style type="text/css">
		.fl {
			float: left;
			width: 200px;
			height: 50px;
			background: #57d2f7;
		}
		.fr {
			float: right;
			width: 200px;
			height: 80px;
			background: #726dd1;
			margin-bottom: 20px;
		}
		.cb {
			clear: both;
			background: #f5f5f5;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="fl">我是左浮动元素</div>
	<div class="fr">我是右浮动元素。<br>margin-bottom 为 20px</div>
<div class="cb">我是 clear 元素。<br>margin-top 为 50px，无效</div>
</body>
</html>





